import React, { useState } from 'react';

import { Upload } from './index';

import type { CustomUploadListItem } from './index';
import type { UploadFile } from 'antd';

const UploadDemo = () => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [customFileList, setCustomFileList] = useState<UploadFile[]>([]);

  // 自定义列表项渲染
  const customListRenderer = ({ file, onRemove, onPreview, onDownload }: CustomUploadListItem) => (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '8px 12px',
        marginBottom: '8px',
        border: '1px solid #e8e8e8',
        borderRadius: '4px',
        background: '#f9f9f9',
      }}
    >
      <div style={{ flex: 1 }}>
        <div className=" w-[150px] truncate text-text-5" title={file.name}>
          {file.name}
        </div>
        <div style={{ fontSize: '12px', color: '#666' }}>
          {file.size ? `${(file.size / 1024 / 1024).toFixed(2)}MB` : ''} •
          {file.status === 'done' && '✅ 上传完成'}
          {file.status === 'uploading' && '⏳ 上传中...'}
          {file.status === 'error' && '❌ 上传失败'}
        </div>
      </div>
      <div style={{ display: 'flex', gap: '8px' }}>
        {file.url && (
          <button
            onClick={() => onPreview?.(file)}
            style={{ padding: '4px 8px', fontSize: '12px' }}
          >
            预览
          </button>
        )}
        <button onClick={() => onDownload?.(file)} style={{ padding: '4px 8px', fontSize: '12px' }}>
          下载
        </button>
        <button
          onClick={() => onRemove(file)}
          style={{ padding: '4px 8px', fontSize: '12px', color: '#ff4d4f' }}
        >
          删除
        </button>
      </div>
    </div>
  );

  return (
    <div style={{ padding: '20px' }}>
      <h2>Upload 组件演示</h2>

      <div style={{ marginBottom: '40px' }}>
        <h3>按钮上传</h3>
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          fileList={fileList}
          onChange={setFileList}
        />
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>拖拽上传</h3>
        <Upload variant="drag" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" multiple />
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>自定义上传列表（默认样式）</h3>
        <Upload
          useCustomList
          action="/openapi/v2/external-sites/import/excel"
          fileList={customFileList}
          onChange={setCustomFileList}
          onPreview={(file) => {
            console.log('预览文件:', file);
            if (file.url) {
              window.open(file.url, '_blank');
            }
          }}
          onDownload={(file) => {
            console.log('下载文件:', file.name);
          }}
        />
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>自定义上传列表（自定义渲染）</h3>
        <Upload
          useCustomList
          customUploadList={customListRenderer}
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          onPreview={(file) => {
            alert(`预览文件: ${file.name}`);
          }}
          onDownload={(file) => {
            alert(`下载文件: ${file.name}`);
          }}
        />
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>拖拽上传 + 自定义列表</h3>
        <Upload
          variant="drag"
          useCustomList
          action="/openapi/v2/external-sites/import/excel"
          multiple
          dragText=""
        />
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>图片上传</h3>
        <Upload
          variant="picture"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          accept="image/*"
          maxCount={4}
        />
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>头像上传</h3>
        <Upload
          variant="avatar"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          accept="image/*"
          maxCount={1}
          showUploadList={false}
        />
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>不同尺寸</h3>
        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
          <Upload
            size="small"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            buttonText="小尺寸"
          />
          <Upload
            size="middle"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            buttonText="中等尺寸"
          />
          <Upload
            size="large"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            buttonText="大尺寸"
          />
        </div>
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h3>禁用状态</h3>
        <Upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          disabled
          buttonText="禁用上传"
        />
      </div>
    </div>
  );
};

export default UploadDemo;
